<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="姓名" width="180">
                <template slot-scope="scope">
                    <p>{{ scope.row.name }}</p>
                </template>
            </el-table-column>
            <el-table-column label="住址" width="180">
                <template slot-scope="scope">
                    <p>{{ scope.row.address }}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template>
                    <el-button size="mini" type="primary" v-hasMenu="'creat'">新增</el-button>
                    <el-button size="mini" type="success" v-hasMenu="'edit'">修改</el-button>
                    <el-button size="mini" type="danger" v-hasMenu="'del'">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            tableData: [
                {
                    name: "王小虎1",
                    address: "上海市",
                },
                {
                    name: "王小虎2",
                    address: "北京市",
                },
            ],
        };
    },
    created() {
        //模拟登录后端返回的按钮权限列表
        let arr = ["creat", "edit"];
        localStorage.setItem("permission", JSON.stringify(arr));
    },
    mounted() { },
    methods: {},
    computed: {},
    watch: {},
    //局部自定义指令
    directives: {
        hasMenu: {
            bind(el, binding) {
                //执行时机页面没有挂载dom时，就执行,比data早，比created晚
                // let arr = JSON.parse(localStorage.getItem("permission"));
                // let bl = arr.includes(binding.value);
                // if (!bl) {
                //     el.style.display = "none";
                //     //因为dom元素获取不到,所以变成异步后再获取
                //     setTimeout(() => {
                //         el.parentNode.removeChild(el);
                //     }, 0);
                //     // console.log(6el.parentNode); // 在外面获取不到dom元素
                // }
            },
            inserted(el, binding) {
                let newArr = JSON.parse(localStorage.getItem('newArr'));
                console.log(newArr)
                let value = newArr.includes(binding.value)
                if (value) {
                    el.style.display = 'none'
                    el.parentNode.removeChild(el)
                }
            }
        },
    },
};
</script>
  
<style scoped lang="scss">

</style>
  